<template>
    <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>用例统计状况</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <div>
                        <ve-pie :data="casePieChartData" :settings="pieChartSetting">
                            <div class="data-empty" v-if="!isDisplay(casePieChartData.rows)">没有数据😂</div>
                        </ve-pie>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>测试实施状况</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <div>
                        <ve-pie :data="executionPieChartData" :settings="pieChartSetting">
                            <div class="data-empty" v-if="!isDisplay(executionPieChartData.rows)">没有数据😂</div>
                        </ve-pie>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import { mapState } from 'vuex'
import { getHeader } from '@/app.config';

export default {
    // props: {
    //     filters: Object
    // },
    computed: {
        ...mapState({
            filters: state => state.filters
        })
    },
    data() {
        return {
            casePieChartData: {
                columns: ['stage', 'rate',],
                rows: []
            },
            executionPieChartData: {
                columns: ['stage', 'rate',],
                rows: []
            },
            pieChartSetting: {
                radius: 100,
            },
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        }
    },
    methods: {
        getTestData: function(project, date) {
            let url = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/test?projectId=${project}&date=${date}`
            // var url = process.env.VUE_APP_KANBAN_HOST+'/api/summary/test?project_id='+project+'&date='+date
            this.$axios
                .get(url, {headers: getHeader()})
                .then((response) => {
                    if (response.data.code == 200) {
                        var caseDict = response.data.case
                        var executionDict = response.data.execution
                        var caseKey = Object.keys(caseDict)
                        var arr = []
                        caseKey.forEach(val => {
                            arr.push({stage: val, rate: caseDict[val]})
                        })
                        this.casePieChartData.rows = arr
                        var executionKey = Object.keys(executionDict)
                        var executionArr = []
                        executionKey.forEach(val => {
                            if (val != '用例总条数') {
                                executionArr.push({stage: val, rate: executionDict[val]})
                            }
                        })
                        this.executionPieChartData.rows = executionArr
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                })
        },
        getData() {
            var time = this.filters.time;
            if (null == time || "undefined" == typeof(time) || time == "null") {
                time = ''
            }
            this.getTestData(this.filters.projectId, time);
        },
        isDisplay(data) {
            if ('undefined' == typeof(data)) {
                return false;
            }
            if (data.length != 0) {
                return true;
            } else {
                return false;
            }
        }
        
    },
    created: function() {
        // this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        this.getData();
    }
}
</script>
<style scoped>
    .data-empty {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, .7);
        color: #888;
        font-size: 14px;
    }
    .ibox{
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox-title{
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 15px 90px 8px 15px;
  min-height: 48px;
  position: relative;
  clear: both;
}
.ibox-title h5{
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: none;
}
.ibox-title a{
  color: #337ab7;
  cursor: pointer;
  font-size: 13px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
  clear: both;
}
.ibox-heading {
  background-color: #f3f6fb;
  border-bottom: none;
}
</style>